<template>
    <div>
        <div>
            <tr>
                <td>好友列表</td>
                <td>跟他聊天</td>
            </tr>
            <tr v-for="i in user_li">
                <td>{{i.username}}</td>
                <td><input type="button" value="聊天" @click="createCat(i.username)"></td>
            </tr>
        </div>
        <div>
            <a-drawer
            title="聊会啊"
            :width="720"
            :visible="visible"
            :body-style="{ paddingBottom: '80px' }"
            @close="onClose"
            >
            <div>
                <a-tabs default-active-key="4" @change="callback">
                <a-tab-pane v-for="i in chat_list" :key="i.id" :tab="i.name" :value='i.id'>
                </a-tab-pane>
                </a-tabs>
            </div>
            <div>
                {{data_list}}
                <a-list item-layout="horizontal" :data-source="data_list">
                <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta>
                    <a slot="title">{{ item.sender }}</a>
                    <a slot="description">{{ item.message }}</a>
                </a-list-item-meta>
                </a-list-item>
                </a-list>
            </div>
            <div
                :style="{
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
                zIndex: 1,
                }"
            >
            <div>
                <a-input v-model="messager" placeholder="请输入" />
            </div>
                <a-button :style="{ marginRight: '8px' }" @click="onClose">
                关闭
                </a-button>
                <a-button type="primary" @click="sendm">
                发送
                </a-button>
            </div>
            </a-drawer>
        </div>
    </div>
</template>

<script>
import md5 from 'js-md5';
import axios from 'axios'
export default {
    data() {
        return {
            user_id:localStorage.getItem('user_id'),
            username:localStorage.getItem('username'),
            user_li:[],
            visible: false,
            messager:'',
            data_list:[],
            chat_id:'',
            chat_list:[]
        }
    },
    methods: {
        getUser(){
            axios({
                url:'http://127.0.0.1:8000/proapp/getuser/?user_id=' + this.user_id,
            }).then(res=>{
                console.log(res.data)
                this.user_li = res.data
            })
        },
        createCat(id){
            this.visible = true;
            var data = {
                'sender':this.username,
                'recipent':id
            }
            axios({
                url:'http://127.0.0.1:8000/proapp/chatcreate/',
                method:'post',
                data:data
            }).then(res=>{
                console.log(res.data)
            })
        },
        onClose() {
            this.visible = false;
        },
        callback(key) {
            this.chat_id = key
            var ed2020 = "2020";
        var sign = md5('price=500&goodid=3,1'+ed2020);
        console.log(sign);
        var _this = this;
        //判断浏览器是否支持websocket
        if("WebSocket" in window){
        console.log("支持");
        //生成websocket链接
        var ws = new WebSocket("ws://127.0.0.1:8000/proapp/getmessage/?chat_id="+_this.chat_id);
        //发送链接请求
        ws.onopen = function(){
          // var data = JSON.stringify({user_id:_this.user_id,kh_id:_this.kh_id})
          ws.send('test');
        }
        //发送消息
        ws.onmessage = function(evt){
            //将获取信息打印
            var received_msg = evt.data;
            // data = JSON.parse(received_msg)
            var data
            // 基于准备好的dom，初始化echarts实例
            // 绘制图表
            data = JSON.parse(received_msg)
            console.log(data)
            console.log(typeof data)
            _this.data_list = data.data_list
        }
        //捕获断开链接
        ws.onclose = function(){
            console.log("链接已经关闭");
        }
    }
        },
        sendm(){
        var data = {
            'message':this.messager,
            'sender':this.username,
            'chat_id':this.chat_id
        }
        axios({
                url:'http://127.0.0.1:8000/proapp/sendmessage/',
                method:'post',
                data:data
            }).then(res=>{
                console.log(res.data)
                this.getChat()
            })
        },
        getChat(){
            axios({
                url:'http://127.0.0.1:8000/proapp/getchat/?username=' + this.username,
            }).then(res=>{
                console.log(res)
                this.chat_list = res.data
            })
        }
    },
    created() {
        this.getUser()
        this.getChat()
    },
    mounted(){
        
    }
}
</script>

<style scoped>

</style>
